<template>
<div>
  	<!-- main -->
  	<div class="main-agile">
  		<h1>--------</h1>
  		<div class="w3ls-signup">
  			<div class="w3ls-signup-right">
          <h2>欢迎登录</h2>
  				<div class="login-agileits-top">
  					<form >
  						<p>用户名 </p>
  						<input type="text" class="name" name="username" required="" v-model="user.username">
  						<p>密码</p>
  						<input type="password" class="password" name="pwd" required="" v-model="user.password">
  						<label class="anim">

  						</label>
                    <p style="margin-top: 0;">验证码</p>
              <el-row>
                  <el-col  :span="3.5" style="margin-right: 20px;">
                    <input type="text"  name="pwd" required="" v-model="yanZhengMa">
                  </el-col>
                  <el-col :span="3.5">
                    <div class="code" @click="refreshCode">
                      <s-identify :identifyCode="identifyCode"></s-identify>
                    </div>
                  </el-col>
              </el-row>
  						<input @click="login()" value="登 录">
  					</form>

  				</div>
  			</div>

        <p style="    margin-top: 65vh; margin-left: calc(50% - 170px); padding: 0;"> 一方养车后台管理系统 © 2021 三峡职院</p>
  			<div class="clear"> </div>
  		</div>
  		<!-- copyright -->
  		<div class="copyright">
  		</div>
  		<!-- //copyright -->
  	</div>
</div>

</template>

<script>

  import {
    mapMutations,mapState
  } from 'vuex'
  import SIdentify from "../components/identify.vue";
  export default {
components: {
    SIdentify: SIdentify
  },
    name: 'HelloWorld',
    data() {
      return {
        yanZhengMa:null,
        identifyCodes: "1234567890",
        identifyCode: "",
        user: {
          password: '',
          username: ''
        }
      }
    },
    computed:mapState(['isLogined']),
    methods: {

      ...mapMutations(['setName', 'setIsLogined', 'setUser','getIsLogined']),
          randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
          },
          refreshCode() {
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
          },
          makeCode(o, l) {
            for (let i = 0; i < l; i++) {
              this.identifyCode += this.identifyCodes[
                this.randomNum(0, this.identifyCodes.length)
              ];
            }
            // console.log(this.identifyCode);//输出验证码
          },

      login() {
        if(this.user.password==''&&this.user.username!=''){
          this.$message({
            message: '请输入密码',
            type: 'warning'
          });
        }
        if(this.user.username==''){
          this.$message({
            message: '请输入用户名',
            type: 'warning'
          });
        }
        if(this.user.username!=''&&this.user.password!=''&&this.yanZhengMa==null){
          this.$message({
            message: '请输入验证码',
            type: 'warning'
          });
        }
        if(this.yanZhengMa!=null&&this.user.username!=''&&this.user.password!=''){
          if(this.yanZhengMa!=this.identifyCode){
            this.$message({
              message: '验证码错误',
              type: 'warning'
            });
            this.refreshCode()
            this.user.password = ''
            this.user.username = ''
            this.yanZhengMa = null
            return
          }
        this.$ajax.post('login', this.user).then(res => {
          var result = res.data;
          if (result.success) {
            var name = result.data.name;
            var token = result.data.token;
            var role=result.data.role;

            window.sessionStorage.setItem("name", name);
            window.sessionStorage.setItem("token", token);
            window.sessionStorage.setItem("role", role);

            this.setName(name);
            this.setIsLogined(true);
            this.setUser(this.user.username);
            this.$router.replace('/shouYe');
          }else{
            this.refreshCode()
          this.$message.error('账户或密码错误');
          }
        }).catch(error => {
          this.refreshCode()
           this.$message.error('账户或密码错误');
        })
        }
      }
    },
    created() {
       let that = this;
         document.onkeypress = function(e) {
         var keycode = document.all ? event.keyCode : e.which;
         if (keycode == 13) {
          var path1 = sessionStorage.getItem("role");
            if(!path1){
             that.login()
            }
          return false;
         }
         };

    },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },

  }
</script>

<style scoped>
  @import url("css/style.css");
  @import url("css/font-awesome.css");

.w3ls-signup-right{
  box-shadow: 0 9px 17px rgba(0, 8, 0, .5);
  position: absolute;
  top: 45%;
  Left: 50%;
  width: 500px;
  transform: translate(-50%, -50%);
}
.w3ls-signup-right:hover{
  box-shadow: 0 15px 25px rgba(0, 8, 0, .5);
}
  .footer p[data-v-1920f498] {
      font-family: Oswald-Regular;
      color: #FFF;
      padding-bottom: -99px;
      padding-top: 60px;
  }
  h1[data-v-1920f498] {
      margin-top: 0px;
  }

  .box {
    position: absolute;
    top: 45%;
    Left: 50%;
    transform: translate(-50%, -50%);
    /* 框的宽度 */
    width: 500px;
    padding: 40px;
    background: rgba(255, 255, 255, .9);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0, 8, 0, .5);
    border-radius: 10px;
  }

  h2 {
    margin: 0 0 30px;
    padding: 0;
    color: #1c1c1c;
    text-align: center;
    font-size: 30px
  }

  .inputBox {
    position: relative;
  }

  .inputBox input {
    width: 100%;
    padding: 20px 0;
    font-size: 16px;
    color: #1c1c1c;
    margin-bottom: 40px;
    border: none;
    border-bottom: 2px solid #1c1c1c;
    outline: none;
    background: transparent;
  }

  .inputBox label {
    position: absolute;
    top: 10px;
    Left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #1c1c1c;
    pointer-events: none;
    transition: .5s;
  }

  .inputBox input:focus~label,
  .inputBox input:valid~label {
    top: -20px;
    left: 0;
    font-size: 14px;
  }

  .box input[ type="button"] {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #03a9f4;
    padding: 10px 50px;
    cursor: pointer;
    border-radius: 30px;

  }
</style>
